<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>用户首页</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        #outer{
            margin-top: 60px;
        }

        #outer td,#outer th{
            border:1px solid #ccc;
            font-family: "American Typewriter";

        }
        #outer table{
            margin: auto;
            box-shadow: 2px -2px 4px #999;
            border-collapse: collapse;
        }

        #outer td,#outer th{
            text-align: center;
            width: 120px;
            height: 32px;
        }
        #title{
            padding-top: 5px;
            color: white;
            text-shadow: 2px 2px 0px #000;
            font-size: 35px;
        }

        #outer table tr:hover{
            background-color: red;
        }
        #outer table tr:hover td{
            color: white;
        }

        #btn button:hover{
            background-color: red !important;
        }
    </style>
</head>
<body>

<%--    引入导航--%>
<%@include file="../nav/nav.jsp"%>

<%--    EL表达式 - 仅仅支持获取作用域中的数据,根据作用域中的key来获取数据--%>
<%--    ${users}--%>
<div style="width: 600px;margin: auto">
    <form action="/cz/userList" method="get">
        <input type="text" placeholder="根据用户名搜索" name="searchName" style="padding: 5px;height: 35px;width: 250px;border-radius: 5px;border: 1px solid deepskyblue">
        <button type="submit" style="margin-left: -5px;color: white;border-radius: 5px;border: 0;width: 100px;height: 35px;background-color:red">查找</button>
    </form>

</div>
<div id="outer">
    <table>
        <thead>
        <th>序号</th>
        <th>用户名</th>
        <th>密码</th>
        <th>角色</th>
        <c:if test="${user.role==0}">
            <th>操作选项</th>
        </c:if>
        </tr>

        </thead>
        <%--varstatus用以记录当前所遍历信息   如获取当前索引用status.index--%>
        <c:forEach items="${users}" var="u" varStatus="status">
            <tr>
                <td>${status.index}</td>
                <td>${u.userName}</td>
                <td>${u.passWord}</td>
                <td>
                    <c:if test="${u.role==0}">超级管理员</c:if>
                    <c:if test="${u.role==1}">普通人员</c:if>
                </td>
                <c:if test="${user.role==0}">
                    <td><a href="/cz/user/del?id=${u.id}" style="text-decoration: none;color: red;font-size: 14px">删除</a>&nbsp;&nbsp;&nbsp;&nbsp;<a style="color: coral;font-size: 14px;text-decoration: none" href="/cz/user/edit?id=${u.id}">编辑</a></td>
                </c:if>
            </tr>


        </c:forEach>
    </table>
</div>
<div id="btn">
    <p style="text-align: center">
        <button type="button" style="color: white;border-radius: 2px;border: 0;width: 100px;height: 35px;background-color:deepskyblue" onclick="window.location.href='/cz/userList?pageIndex=${pageinfo.prePage == 0?1:pageinfo.prePage}';">←上一页</button>
        <button type="button" style="color: white;border-radius: 2px;border: 0;width: 100px;height: 35px;background-color:deepskyblue" onclick="window.location.href='/cz/userList?pageIndex=${pageinfo.nextPage == 0?1:pageinfo.nextPage}';">下一页→</button>
    </p>
</div>
<div>
    <hr style="color: #999;margin-top: 100px;width: 80%">
    <p style="font-size: 11px;color: #ccc;text-align: center">京公网安备11000002000001号京ICP证030173号©2021 Aistar (星)-经营性-2017-0020</p>
</div>
</body>
</html>